<template>
  <div class="one-div">
    <div class="tags-type">
      <h5 class="tags-type-h5">标签类型</h5>
      <el-scrollbar style="height: 90%">
        <div class="tags-type-div">
          <div v-for="(item,index) in tagsList" :key="index" style="margin: 0 auto; position: relative; width: 80%; text-align: center">
            <el-button size="medium"
                       type="text"
                       style="white-space: normal; width: 70%"
                       :disabled="globalEditControl"
                       @click="tagsTab(item,index)">
              {{ item.name }}
            </el-button>
            <i class="el-icon-arrow-right el-icon--right" style="position: absolute; top: 36%;" v-if="forIndex == index"></i>
          </div>
        </div>
      </el-scrollbar>
    </div>
    <div class="tags-type">
      <h5 class="tags-type-h5">标签组</h5>
      <el-scrollbar style="height: 90%">
        <div class="tags-group-two-div" style="width: 80%; margin: 0 auto; text-align: center">
          <div v-for="(item,index) in groups" :key="index" style="width: 100%; position: relative">
            <el-input @focus="globalEditControl = true"
                      v-if="item.showType == 'edit'"
                      maxlength="20"
                      :ref="'group_' + index"
                      @blur="editTagsGroup(item,'group_' + index)"
                      v-model="item.name"
                      style="margin-top: 15px; width: 70%">
            </el-input>
            <el-button :disabled="forIndex === 0 || globalEditControl"
                       v-if="item.showType == 'view' || currIndex != index"
                       size="mini"
                       @click="viewGroup(item,index)"
                       style="margin-top: 15px; width: 70%; white-space: normal">
              {{item.name }}
            </el-button>
            <el-button icon="el-icon-edit"
                       v-if="forIndex !== 0"
                       :disabled="globalEditControl"
                       @click="editGroup(item, index)"
                       type="text"
                       style="position: absolute; top: 25%; left: 85%">
            </el-button>
            <el-button icon="el-icon-close"
                       :disabled="globalEditControl"
                       v-if="forIndex !== 0"
                       @click="deleteGroup(index)"
                       type="text"
                       style="position: absolute; top: 23%; left: 92%; font-size: 18px">
            </el-button>
            <i class="el-icon-arrow-right" style="position: absolute; top: 55%; left: 108%" v-if="forTags === index && forIndex !== 0"></i>
          </div>
        </div>
        <div class="tags-group-div">
          <el-input
            class="add-tags-input"
            maxlength="20"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            style="width: 70%"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
          ></el-input>
          <el-button type="primary"
                     :disabled="globalEditControl"
                     v-else-if="forIndex !==0"
                     size="small"
                     class="bc-add-tags"
                     @click="addTagsGroup">
            添加标签组
          </el-button>
        </div>
      </el-scrollbar>
    </div>
    <div class="tags-type">
      <h5 class="tags-type-h5" v-if="forIndex !==0">标签</h5>
      <el-scrollbar style="height: 90%">
        <div class="tags-edit-input" :key="index" v-for="(item,index) in tags" style="position: relative; width: 80%; margin: 0 auto">
          <el-input @focus="globalEditControl = true"
                    maxlength="20"
                    v-if="item.showType == 'edit'"
                    :ref="'tag_' + index"
                    @blur="editTagsGroup(item,'tag_' + index)"
                    v-model="item.name"
                    style="margin-top: 15px;  width: 70%">
          </el-input>
          <el-button :disabled="forIndex === 0 || globalEditControl"
                     v-if="item.showType == 'view'"
                     style="margin-top: 15px; width: 70%; white-space: normal"
                     size="mini"
                     @click="viewTags(item,index)" >
            {{item.name}}
          </el-button>
          <el-button icon="el-icon-close"
                     :disabled="globalEditControl"
                     v-if="forIndex !== 0"
                     @click="deleteTag(index)"
                     type="text"
                     style="position: absolute; top: 23%; left: 85%; font-size: 18px">
          </el-button>
        </div>
        <div class="tags-group-div">
          <el-input
            maxlength="20"
            class="add-tags-input"
            v-if="tagsInputVisible"
            v-model="tagsInputValue"
            ref="tagsInput"
            size="small"
            @keyup.enter.native="tagsHandleInputConfirm"
            @blur="tagsHandleInputConfirm"
          ></el-input>
          <el-button type="primary"
                     :disabled="globalEditControl || groups.length === 0"
                     v-else-if="forIndex !==0"
                     size="small"
                     class="bc-add-tags"
                     @click="addTags">
            添加标签
          </el-button>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import {
  getSystemTags,
  getTenantTags,
  submitTenant
} from "@/api/system/creative_tags";
import tags from "@/util/tags";
import {validStr} from "@/util/validate";

export default {
  name: "bcAddTagsType",
  data() {
    return {
      optTags: '',
      showIcon: '',
      forTags: 0,
      forIndex: 0,
      currIndex: -1,
      tagsList: [],
      inputVisible: false,
      inputValue: '',
      tagsInputVisible: false,
      tagsInputValue: '',
      globalEditControl: false,
      tags: [],
      groups: []
    }
  },
  created() {
    // getTenantTagsList().then(res =>{
    //   if (res.data.data.length !==0){
    //     this.tagsList = res.data.data
    //   }
    // })
    // getSystemTagsList().then(res =>{
    //   debugger
    //   if (res.data.data.length !== 0){
    //     this.tenantTags = res.data.data
    //     this.mergeTagsList = this.tagsList.concat(this.tenantList)
    //     console.log(this.mergeTagsList)
    //   }
    // })
    Promise.all([
      getSystemTags(),
      getTenantTags()
    ]).then((result) => {
      this.tagsList = tags.tagsAdd(result[0].data.data, result[1].data.data)
      this.groups = this.tagsList[0].groups
    })
  },
  methods: {
    getTags() {
      Promise.all([
        getSystemTags(),
        getTenantTags()
      ]).then((result) => {
        this.tagsList = tags.tagsAdd(result[0].data.data, result[1].data.data)
        this.groups = this.tagsList[this.forIndex].groups
        this.tags = this.tagsList[this.forIndex].groups[this.forTags].tags
      })
    },
    editTagsGroup(item, ref) {
      if (validStr(item.name)) {
        this.$message.info("类型名无效！")
        this.$refs[ref][0].focus()
      } else {
        item.showType = 'view'
        let data = JSON.stringify(this.tagsList)
        submitTenant(data).then(() => {
          this.$message.success("更新成功！")
          this.getTags()
        }).finally(() => {
          this.globalEditControl = false
        })
      }
      this.currIndex = -1
    },
    editTags(item){
      item.showType = 'edit'
    },
    addTags(){
      this.tagsInputVisible = true;
      this.$nextTick(() => {
        this.$refs.tagsInput.$refs.input.focus();
      });
    },
    tagsHandleInputConfirm(){
      let inputValue = this.tagsInputValue
      let addTags = {
        name: inputValue,
        flag: 0 | 1,/* 1：生成素材名，0：不生成素材名 */
        showType: 'view',
      }
      if (!validStr(addTags.name)) {
        if (!this.tagsList[this.forIndex].groups[this.forTags].tags) {
          this.tagsList[this.forIndex].groups[this.forTags].tags = []
        }
        let flag = true
        this.tagsList[this.forIndex].groups[this.forTags].tags.forEach(tag => {
          if (tag.name === inputValue) {
            this.$message.info("标签已存在！")
            flag = false
          }
        })
        if (flag) {
          this.tagsList[this.forIndex].groups[this.forTags].tags.push(addTags);
          this.tags = this.tagsList[this.forIndex].groups[this.forTags].tags
          let data = JSON.stringify(this.tagsList)
          submitTenant(data).then(() => {
            this.$message.success("保存成功！")
            this.getTags()
          })
        } else {
          return
        }
      } else {
        this.$message.info("类型名无效！")
      }
      this.tagsInputVisible = false;
      this.tagsInputValue = '';
    },
    deleteGroup(index) {
      if (this.tagsList[this.forIndex].groups[index].tags.length > 0) {
        this.$message.info("存在子标签，不允许删除标签组！")
      } else {
        this.$confirm('确定删除标签组?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.tagsList[this.forIndex].groups.splice(index, 1);
          let data = JSON.stringify(this.tagsList)
          submitTenant(data).then(() => {
            this.$message.success("更新成功！")
            this.getTags()
          })
        })
      }
    },
    deleteTag(index) {
      this.$confirm('确定删除标签?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
      this.tagsList[this.forIndex].groups[this.forTags].tags.splice(index, 1);
        let data = JSON.stringify(this.tagsList)
        submitTenant(data).then(() => {
          this.$message.success("更新成功！")
          this.getTags()
        })
      })
    },
    viewGroup(item,index){
      this.forTags = index
      this.currIndex = index;
      this.tags = this.tagsList[this.forIndex].groups[this.forTags].tags
    },
    editGroup(item, index) {
      item.showType = 'edit'
      this.currIndex = index;
      this.$nextTick(() => {
        this.$refs['group_' + index][0].focus();
      });
    },
    viewTags(item,index){
      item.showType = 'edit'
      this.$nextTick(() => {
        this.$refs['tag_' + index][0].focus();
      });
    },
    tagsTab(item,index) {
      this.currIndex = -1
      this.forIndex = index
      this.tagsTypeEditIcon = true
      this.showIcon = item.name
      this.optTags = item.type
      this.forTags = 0
      this.groups = this.tagsList[this.forIndex].groups
      if (!this.tagsList[this.forIndex].groups[0]) {
        this.tags = []
      } else {
        this.tags = this.tagsList[this.forIndex].groups[this.forTags].tags
      }
    },
    addTagsGroup() {
      this.inputVisible = true;
      this.$nextTick(() => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    }
    ,
    handleInputConfirm() {
      let inputValue = this.inputValue;
      this.addTagsValue ={
        name: inputValue,
        type: 'global',
        showType: 'view',
        tags: [],
      }
      let inputView = this.addTagsValue
      if (!validStr(inputView.name)) {
        if (!this.tagsList[this.forIndex].groups) {
          this.tagsList[this.forIndex].groups = []
        }
        let flag = true
        this.tagsList[this.forIndex].groups.forEach(group => {
          if (group.name === inputView.name) {
            this.$message.info("标签组已存在！")
            flag = false
          }
        })
        if (flag) {
          this.tagsList[this.forIndex].groups.push(inputView);
          let data = JSON.stringify(this.tagsList)
          submitTenant(data).then(() => {
            this.$message.success("保存成功！")
            this.getTags()
          })
        } else {
          return
        }
      } else {
        this.$message.info("类型名无效！")
      }
      this.inputVisible = false;
      this.inputValue = '';
    }
    ,
  }
}
</script>

<style scoped>
.one-div {
  width: 100%;
  height: 100%;
  background-color: white;
  padding-top: 1px;
  display: flex
}

.tags-type {
  width: 30%;
  height: 100%;
}

.tags-type-h5 {
  text-align: center;
  color: #a6a9ad
}

.tags-type-div {
  width: 100%;
  /*height: 100%;*/
  display: flex;
  flex-direction: column;
}

.tags-group-div {
  /*width: 100%;
  height: 300px;*/
  display: flex;
  flex-direction: column;
  align-items: center;
}

.add-tags-input {
  /*width: 100px;*/
  /*min-width: 100px;*/
  margin-top: 15px;
}
.tags-group-two-div{
  display: flex;
  flex-direction: column;
  align-items: center
}
.bc-add-tags{
  /*width: 100px;*/
  margin-left: 3px;
  min-width: 100px;
  margin-top: 15px;
}
.tags-edit-input{
  /*width: 100%;*/
  display: flex;
  flex-direction: column;
  align-items: center
}
</style>
